<template>
  <div class="model-con">
    <div class="title">民主测评</div>
    <div class="sub-title">{{ evalAnalysis.quarter }}{{ statusName }}</div>
    <ul class="num-list">
      <li class="num-li" @click="onShowDialog(1)">
        <p class="val">{{ evalAnalysis.numberOfEvaluators || 0 }}</p>
        <p class="label">测评人员数量</p>
      </li>
      <li class="num-li" @click="onShowDialog(1)">
        <p class="val">{{ evalAnalysis.votersPersonnelShouldBe || 0 }}</p>
        <p class="label">投票人员应到</p>
      </li>
      <li class="num-li" @click="onShowDialog(1)">
        <p class="val val-red">{{ evalAnalysis.votersActuallyShowed || 0 }}</p>
        <p class="label">投票人员实到</p>
      </li>
    </ul>
    <!-- 民主测评 开始-->
    <XnDialog
      custom-class="branch_dialog branch_dialog1"
      title="民主测评"
      :visible.sync="dialogShow"
      @close="dialogShow = false">
      <evaluation-sum-main ref="evaluationSumMains" v-if="showOrgList"></evaluation-sum-main>
      <evaluation-data ref="evaluationData" :assessmentId="evalAnalysis.assessmentId" v-else></evaluation-data>
    </XnDialog>
    <!-- 民主测评 结束-->
  </div>
</template>

<script>
import { democraticAssessmentStatistical } from '@api/modules/api-staAnalysis.js'
import EvaluationSumMain from './EvaluationSumMain.vue'
import EvaluationData from './EvaluationData.vue'
import XnDialog from '@com/xnDialog.vue'
export default {
  name: 'EvaluationAnalysis',
  components: { EvaluationSumMain, EvaluationData, XnDialog },
  props: {
    selectParams: {
      type: Object,
      default: () => {},
    },
    /* 季度名称 */
    gradeQuarterName: {
      type: String,
      default: '',
    },
    // 是否有机构筛选
    showOrgList: Boolean,
  },
  data() {
    return {
      tabsData: [],
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      activeId: '',
      dialogShow: false,
      selParams: {
        id: '',
        orgName: '',
        title: '',
        tenantId: '',
      },
      evalAnalysis: {},
    }
  },
  computed: {
    statusName() {
      let str = ''
      if (this.evalAnalysis.status) {
        switch (this.evalAnalysis.status) {
          case '1':
            str = '未开始'
            break
          case '2':
            str = '收集中'
            break
          case '3':
            str = '已完成'
            break
          case '4':
            str = '已暂停'
            break
          default:
            break
        }
        return str
      } else {
        return str
      }
    },
  },
  watch: {
    selectParams: {
      handler(newValue, oldValue) {
        if (newValue.quarter && newValue.year && newValue.orgId) {
          this.pageInit()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    async pageInit() {
      const { data } = await democraticAssessmentStatistical({
        ...this.selectParams,
      })
      this.evalAnalysis = { ...data }
    },
    // 点击切换
    onShowDialog() {
      this.selParams.id = this.selectParams.orgId
      this.selParams.title = `${this.selectParams.year}年${this.gradeQuarterName}`
      this.selParams.tenantId = this.userInfo.tenantId
      this.dialogShow = true
      this.$nextTick(() => {
        if (this.showOrgList) {
          this.$refs.evaluationSumMains.tranformData(this.selParams)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.model-con {
  border: 1px solid #ebeef5;
  padding: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .sub-title {
    font-size: 14px;
    color: #70b603;
    margin-top: 15px;
  }
  .num-list {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
    .num-li {
      text-align: center;
      cursor: pointer;
      .val {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        &.val-red {
          color: #b61213;
        }
      }
      .label {
        color: #666;
        font-size: 14px;
      }
      &:hover {
        .val {
          text-decoration-line: underline;
          color: #0957af;
        }
      }
    }
  }
}
.branch_dialog1 {
  /deep/.el-dialog__body {
    padding: 0;
    height: 68vh;
  }
}
</style>
